<template>
	<view class="box">
		<view class="" style="display: flex;justify-content: space-between;">
			<view class="item" @click="call(0)">
				<image :src="$BASE_URL + serviceIcon[0]" mode="aspectFill"></image>
				<view class="" style="font-size: 22rpx;color: #3D3D3D;">
					商家热线
				</view>
			</view>

			<!-- #ifdef MP-ALIPAY -->
			<view class="item">
				<contact-button tnt-inst-id="4rs_kzXF" scene="SCE01234650" size='60' :icon='$BASE_URL + serviceIcon[1]'
					style='width: 200rpx !important; background-color: aquamarine;' />
				<view class="" style="font-size: 22rpx;color: #3D3D3D;">
					在线客服
				</view>
			</view>

			<!-- #endif -->


			<view class="item" @click="call(2)">
				<image :src="$BASE_URL + serviceIcon[2]" mode="aspectFill"></image>
				<view class="" style="font-size: 22rpx;color: #3D3D3D;">
					平台热线
				</view>
			</view>

		</view>
		<view class="" style="font-size: 22rpx;text-align: center;margin-top: 40rpx;">
			服务时间：周一至周日 9:00~21~30
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			serviceIcon: {
				type: Array,
				default: () => {
					return []
				}
			},
			mobile: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				list: [{
						title: '商家客服',
						small: '发货、买断、归还、还款等咨询',
					},
					{
						title: '平台在线客服',
						small: '在线客服实时与您沟通',
						number: ''
					},
					{
						title: '平台热线客服',
						small: '投诉、建议、售后等咨询',

					}
				]
			}
		},
		methods: {
			call(i) {
				if (i == 0) {
					if (this.mobile == '') {
						return uni.showToast({
							title: '暂无联系电话~'
						})
					}
					uni.makePhoneCall({
						phoneNumber: this.mobile //仅为示例
					});

				}

				if (i == 1) {
					return uni.showToast({
						title: '功能开发中~'
					})
				}
				if (i == 2) {

					uni.makePhoneCall({
						phoneNumber: uni.getStorageSync('kefu') || '4006193669' //仅为示例
					});
				}
			}
		}




	}
</script>

<style scoped lang="scss">
	.box {
		// width: 612rpx;
		// height: 564rpx;
		border-radius: 40rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 60rpx 44rpx 44rpx 36rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			// background-color: aquamarine;
			// height: 140rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;

			// padding-top: 28rpx;
			// padding-bottom: 36rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 10rpx;
			}

			font-size: 22rpx;

			.left {
				width: 80rpx;
				height: 80rpx;

				// margin-right: 18rpx;

			}

			.right {
				width: 334rpx;
				height: 100%;
				border-bottom: 1rpx solid gainsboro;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right-1 {}

				.right-2 {
					width: 24rpx;
					height: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
